<template>
	<view class="rotate-for-portrait" v-if="questionList&&!orientation">
		<image :src="lifeCodeBg" mode="aspectFill" class="life-code-bg" v-if="!isDoQeustion"></image>
		<view class="optn-bg">
			<view class="" v-if="!isDoQeustion">
				<view class="optn-bg-mask-white"></view>
				<view class="optn-bg-mask-black"></view>
				<image :src="questionList[currentIndex].qstnImg" mode="aspectFill" class="optn-title"></image>
			</view>


			<image :src="afterGround" mode="aspectFill" :class="['after-around',isDoQeustion?'after-around-animate':'']"
				v-if="isDoQeustion"></image>


			<image :src="afterLight" mode="" class="after-light" v-if="isDoQeustion"></image>

			<view :style="{backgroundImage:'url('+questionList[currentIndex].optnList[0].optnImg+')'}"  v-if="selectLeft"
				:class="['optn-img-0',!selectRight?'left-optn-animate':'']" @click="selectOptn('left')"></view>
			<view :style="{backgroundImage:'url('+questionList[currentIndex].optnList[1].optnImg+')'}" v-if="selectRight"
				:class="['optn-img-1',!selectLeft?'right-optn-animate':'']" @click="selectOptn('right')"></view>

			<view class="circle-white" v-if="isDoQeustion"></view>
			<image :src="getLieftPerson(currentIndex).img"
				:style="{width:getLieftPerson(currentIndex).width+'rpx',height:getLieftPerson(currentIndex).height+'rpx'}"
				mode="" :class="['life-person',isDoQeustion?'life-person-animate':'']"></image>
		</view>

		<image :src="isOpenMusic?musicOn1:musicOff1" mode="" class="musci-open" @click="openMusic()"></image>
	</view>
	<view class="" v-else style="width: 100%;padding-top: 200rpx;color: brown;font-size: 34rpx;text-align: center;">
		{{orientation}}
	</view>
</template>

<script>
	const imgBaseURL = 'https://webstatic.feifanxinli.com/public_test/images/knowme'
	import {
		qstnShow,
		userWebAnswer,
		payMoney
	} from '@/common/api/scl_api.js'
	export default {
		data() {
			return {
				isOpenMusic: false,
				musicOn1: imgBaseURL + '/splash/musicOn1.png',
				musicOff1: imgBaseURL + '/splash/musicOff1.png',
				selectLeft: true,
				selectRight: true,
				isDoQeustion: false,
				imgBaseURLHttps: imgBaseURL,
				lifeCodeBg: imgBaseURL + '/life/lifeCodeBg.jpg',
				periodImg: [{
						img: '/life/period1.gif',
						width: 230,
						height: 173
					},
					{
						img: '/life/period2.gif',
						width: 204,
						height: 112
					}, {
						img: '/life/period3.gif',
						width: 173,
						height: 254
					}, {
						img: '/life/period4.gif',
						width: 207,
						height: 303
					}, {
						img: '/life/period5.gif',
						width: 171,
						height: 303
					}, {
						img: '/life/period6.gif',
						width: 154,
						height: 303
					}, {
						img: '/life/period7.gif',
						width: 129,
						height: 252
					}, {
						img: '/life/period8.png',
						width: 303,
						height: 184
					}
				],
				afterGround: imgBaseURL + '/life/afterGround.jpg',
				afterLight: imgBaseURL + '/life/afterLight.png',
				questionAnswer: [],
				questionList: null,
				currentIndex: 0,
				startTime: new Date().getTime(), //记录测评开始时间
				doQuestionNum: 0,
				isFullPage: false, //为真时，在最后提交时需判断是否已购买
				sclId: '',
				detail: null,
				userType: '', //用户扫码类型  freeScl
				testAfterPay: '',
				userId: uni.getStorageSync('userInfoCP').userId,
				jsonStr: '', //接入平台携带的用户打包信息
				answerEndDuration: 5000, //答题结束动画
				answerEndFlag: false,
				innerAudioContext: null, //音频播放实例
				isShowOptnFlag: true, //显示选项控制
				isCanNextClick: false ,//是否可以点击下一题
				orientation:''
			}
		},
		onLoad(options) {
			this.sclId = options.sclId;
			this.userType = options.userType;
			this.questionFullBg = options.questionFullBg;
			this.testAfterPay = options.testAfterPay;
			this.jsonStr = options.jsonStr
			this.initQeustion(this.sclId);
			this.openMusic();
		},
		onShow() {
			// 监听屏幕方向变化
			uni.onWindowResize((res) => {
				if (res.size.windowWidth > res.size.windowHeight) {
					this.orientation = '请锁定屏幕并保持竖屏完成测评';
					// this.$showToast('横屏模式')
					// 在这里处理横屏逻辑
				} else {
					this.orientation = '';
					// this.$showToast('竖屏模式')
					// 在这里处理竖屏逻辑
				}
			});
		},
		onUnload() {
			// 页面卸载时移除监听
			uni.offWindowResize();
			// #ifdef MP-WEIXIN
			this.stopMusic();
			this.innerAudioContext = null;
			return
			// #endif
			this.innerAudioContext.destroy() //销毁创建的音频实例
		},
		methods: {
			stopMusic() {
				if (!this.innerAudioContext) return
				this.innerAudioContext.pause()
				this.isOpenMusic = false;
			},
			openMusic() {
				if (this.isOpenMusic) {
					this.stopMusic();
					return
				}
				this.isOpenMusic = true

				let that = this
				// #ifdef MP-WEIXIN
				that.innerAudioContext = uni.getBackgroundAudioManager();
				that.innerAudioContext.title = 'Know Me';
				// #endif
				// #ifndef MP-WEIXIN
				that.innerAudioContext = uni.createInnerAudioContext();
				// #endif
				//创建音频实例
				that.innerAudioContext.autoplay = true; //自动播放
				that.innerAudioContext.loop = true; //自动播放
				//音频地址（模拟）
				that.innerAudioContext.src = 'https://image.feifanxinli.com/ceping/healthy.mp3';
				that.innerAudioContext.onPlay(() => {
					that.isOpenMusic = true
				});
				that.innerAudioContext.onPause(() => {
					that.isOpenMusic = false
				});
				that.innerAudioContext.onStop(() => {
					that.isOpenMusic = false
				});
				//自然播放结束
				that.innerAudioContext.onEnded(() => {
					that.isOpenMusic = false
				})
			},
			selectOptn(type) {
				let optnList = this.questionList[this.currentIndex].optnList;
				let item1 = optnList[0];
				let item2 = optnList[1];
				if (type == 'left') {
					this.selectRight = false;
					item1.select = '1'
					this.$
				} else {
					this.selectLeft = false;
					item2.select = '1'
				}
				this.$set(this.questionList[this.currentIndex].optnList, 0, item1);
				this.$set(this.questionList[this.currentIndex].optnList, 1, item2);
				this.isDoQeustion = true;
				setTimeout(() => {
					this.isCanNextClick = true;
					this.nextQeustion();
				}, this.answerEndDuration)
			},
			getLieftPerson(index) {
				if (index == 8) {
					index = 5;
				} else if (index == 6 || index == 7) {
					index = 4;
				} else if (index == 4 || index == 5) {
					index = 3
				} else if (index == 2 || index == 3) {
					index = 2
				} else if (index == 10) {
					index = 7
				} else if (index == 9) {
					index = 6
				}
				return {
					img: imgBaseURL + this.periodImg[index].img,
					width: this.periodImg[index].width,
					height: this.periodImg[index].height,
				};
			},
			initQeustion(sclId) {
				qstnShow({
					sclId: sclId,
					userId: this.userId,
					h5Type: this.userType
				}).then(res => {
					if (res.data.code == 2000) {
						this.questionList = res.data.data;
					}
				})
			},
			nextQeustion(type) {
				// if (!this.isCanNextClick) {
				// 	return
				// }
				if (this.currentIndex < this.questionList.length - 1) {
					// this.isShowOptnFlag = false
					this.currentIndex++;
					this.isShowOptnFlag = true
					this.isDoQeustion = false;
					this.selectLeft = true;
					this.selectRight = true;

					// setTimeout(() => {
					// 	this.answerEndFlag = false;
					// 	this.isCanNextClick = false
					// }, this.answerEndDuration)
				} else {
					if (type == 'autoSelect') return
					if (this.$fangBaoClick()) return
					this.payScl();
				}
			},
			toSubmit() {
				let testDuration = new Date().getTime() - this.startTime;
				let answerJson = [];
				this.questionList.forEach((itemI, i) => {
					this.questionList[i].optnList.forEach((itemJ, j) => {
						if (itemJ.select && itemJ.select == '1') {
							let data = this.questionList[i];
							answerJson.push({
								"sclId": data.sclId,
								"qstnId": data.optnList[j].qstnId,
								"optnId": data.optnList[j].id,
								"score": data.optnList[j].optnScore,
								"outType": data.optnList[j].outType,
								"outId": data.optnList[j].outId,
								"changeTimes": 0,
								"ansDate": null
							});
						}
					})
				})
				if (this.questionList.length != answerJson.length) {
					this.$showToast('请检查并完成所有的题目');
					return
				}
				userWebAnswer({
					type: 'order',
					sclId: this.sclId,
					testDuration: testDuration,
					h5Type: this.userType,
					userId: this.userId,
					jsonStr: this.jsonStr,
					answerJson: JSON.stringify(answerJson)
				}).then(res => {
					if (res.data.code == 2000) {
						var reportId = res.data.data.id;
						uni.redirectTo({
							url: '/subcontractorC/pages/sclIntroduce/knowMe/result?reportId=' + reportId +
								"&sclId=" +
								this
								.sclId
						})

					} else {
						this.$showToast(res.message);
					}
				})
			},
			payScl() {
				//testAfterPay  yes  需要支付   其它不需要
				if (this.testAfterPay == 'no') {
					this.toSubmit();
					return
				}
				let this_ = this;
				uni.showModal({
					title: '温馨提示',
					content: '完成支付后，可提交查看结果',
					success(res) {
						if (res.confirm) {
							this_.goPayByTest();
						} else {

						}
					}
				})

			},
			goPayByTest() {
				let this_ = this;
				this_.toSubmit();
				return
				payMoney({
					id: this.sclId
				}).then(res => {
					uni.requestPayment({
						provider: 'wxpay',
						service: 5, //直接拉起微信支付
						orderInfo: res.data, //抖音支付信息
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.packageValue,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success(res) {
							if (res.errMsg == 'requestPayment:ok') {
								this_.toSubmit();
							} else {
								this_.$showToast('支付取消');
							}
						},
						fail: function(err) {
							console.log(err)
							this_.$showToast('支付失败');
						}
					});
				})
			}
		}
	}
</script>

<style>
	.musci-open {
		width: 61rpx;
		height: 61rpx;
		position: fixed;
		left: 20rpx;
		top: 20rpx;
		z-index: 100;
	}


	.circle-white {
		width: 340rpx;
		height: 340rpx;
		background-color: rgba(255, 255, 255, .6);
		border-radius: 50%;
		position: absolute;
		right: 150rpx;
		top: 360rpx;
	}

	@keyframes afterAroundAni {
		0% {
			transform: translateY(0);
		}
	
		100% {
			transform: translateY(-60rpx);
		}
	}
	
	.after-around-animate {
		animation: afterAroundAni 3s linear;
		animation-fill-mode: forwards;
		/* 动画结束后保持最后一帧的状态 */
	}

	.after-around {
		width: 100vh;
		height: 60rpx;
		display: block;
		position: absolute;
		top: 750rpx;
		left: 0;
	}

	.after-light {
		width: 520rpx;
		height: 750rpx;
		position: absolute;
		right: 80rpx;
		top: 0;
	}



	@keyframes leftOptnBottomToTop {
		0% {
			right: 390rpx;
			top: 410rpx;
			transform: scale(1);
		}

		100% {
			right: 200rpx;
			top: 150rpx;
			transform: scale(.7);
			filter: invert(100%) brightness(200%);
		}
	}

	@keyframes rightOptnBottomToTop {
		0% {
			right: 160rpx;
			top: 410rpx;
			transform: scale(1);
		}

		100% {
			right: 200rpx;
			top: 150rpx;
			transform: scale(.7);
			filter: invert(100%) brightness(200%);
		}
	}

	.left-optn-animate {
		width: 229rpx;
		height: 207rpx;
		animation: leftOptnBottomToTop 4s;
		animation-fill-mode: forwards;
		/* 动画结束后保持最后一帧的状态 */
	}

	.right-optn-animate {
		width: 229rpx;
		height: 207rpx;
		animation: rightOptnBottomToTop 4s;
		animation-fill-mode: forwards;
		/* 动画结束后保持最后一帧的状态 */
	}

	.optn-img-0 {
		width: 229rpx;
		height: 207rpx;
		background-size: 100% 100%;
		position: absolute;
		right: 390rpx;
		top: 410rpx;
	}

	.optn-img-1 {
		width: 229rpx;
		height: 207rpx;
		background-size: 100% 100%;
		display: block;
		position: absolute;
		right: 160rpx;
		top: 410rpx;
	}

	@keyframes leftToRight {
		0% {
			left: 249rpx;
			top: 400rpx;
		}

		100% {
			left: calc(100vh - 410rpx);
			top: 440rpx;
		}
	}

	.life-person-animate {
		animation: leftToRight 4s;
		animation-fill-mode: forwards;
		/* 动画结束后保持最后一帧的状态 */
	}

	.life-person {
		position: absolute;
		left: 249rpx;
		top: 400rpx;
	}

	.optn-title {
		width: 808rpx;
		height: 162rpx;
		display: block;
		position: absolute;
		left: 249rpx;
		top: 200rpx;
	}

	.optn-bg-mask-black {
		width: calc(100vh - 90rpx);
		height: 660rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border-radius: 30rpx;
		border: 10rpx solid #172228;
	}

	.optn-bg-mask-white {
		width: calc(100vh - 60rpx);
		height: 690rpx;
		background: rgba(255, 255, 255, .8);
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border-radius: 36rpx;
	}

	.optn-bg {
		width: 100vh;
		height: 750rpx;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.life-code-bg {
		width: 100vh;
		height: 750rpx;
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.rotate-for-portrait {
		transform: rotate(90deg);
		transform-origin: top left;
		width: 100vh;
		/* 原来的高度 */
		height: 750rpx;
		/* 原来的宽度 */
		position: fixed;
		top: 0;
		left: 100%;
		background-size: cover;
		background-position: center;
		background-color: #172228;
	}
</style>